<!--用于主页面表格组件-->
<template>
  <div class="table-bar">
    <el-table
      :data="tableData"
      highlight-current-row
      border
      @row-click="rowClick"
      @row-dblclick="rowdblClick"
      height="100%"
      :row-style="{height:'40px'}"
      :cell-style="{padding:'0px'}"
      :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="50">
      </el-table-column>
      <slot v-for="(item,index) in tableColumns">
        <el-table-column
          v-if="item.field==='IsLock'"
          :key="index"
          :label="item.title"
          :width="item.width">
          <template slot-scope="scope">
            <icon-font type="icon-suoding" style="font-size: 16px;" v-if="scope.row.IsLock" />
            <icon-font type="icon-jiesuo" style="font-size: 16px;" v-else />
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.field!=='IsLock'"
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width"
          show-overflow-tooltip
          sortable>
        </el-table-column>
      </slot>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <a-dropdown :trigger="['click']" placement="bottomRight" v-if="linkData.length > 0">
            <a class="ant-dropdown-link">查看</a>
            <a-menu slot="overlay">
              <a-menu-item v-for="(item, index) in linkData" :key="index" @click="toLink(item.title, scope.row)">{{ item.title }}</a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-divider type="vertical" v-if="linkData.length > 0" />
          <a @click="openTextTable">打开</a>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="loadImg">
      <a-tooltip placement="left">
        <template slot="title">
          <span>下一页</span>
        </template>
        <div class="loadImg-icon">
          <a-icon type="step-forward"></a-icon>
        </div>
      </a-tooltip>
      <a-tooltip placement="left">
        <template slot="title">
          <span>全部数据</span>
        </template>
        <div class="loadImg-icon">
          <a-icon type="fast-forward"></a-icon>
        </div>
      </a-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableColumns: {
      type: Array,
      default: () => {
        return []
      }
    },
    linkData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {}
  },
  created () {},
  mounted () {},
  methods: {
    // 单击
    rowClick (row) {},
    // 双击
    rowdblClick (row) {},
    toLink (name, row) {
      this.$emit('toLink', name, row)
    },
    // 查看全文数据事件
    openTextTable () {
      this.$emit('textTable')
    }
  }
}
</script>
<style lang="less" scoped>
.table-bar {
  height: 100%;
  position: relative;
  .loadImg {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -35px;
    z-index: 10;
    .loadImg-icon {
      width: 36px;
      height: 36px;
      font-size: 15px;
      cursor: pointer;
      background: #FFF;
      text-align: center;
      line-height: 36px;
      margin-bottom: 6px;
      border-radius: 50%;
      position: relative;
      display: block;
      box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.1), inset 0px -1px 0px 0px rgba(0,0,0,0.1);
      &:hover {
        background: #fcfcfc;
      }
      &:active {
        background: #EEE;
      }
      .anticon {
        color: #8c92a4;
        font-size: 20px;
      }
    }
  }
}
</style>
